
<template>
<h1>自定义控件开发</h1>
  <div id="customKeyFrames" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import {_} from 'lodash';
import * as echarts from 'echarts';

// 绘制图表




let jsonConfig = {
  // 配置json
  chartConfig: [
    {
      "title": "控件样式", //样式分组的名称
      "key": "chartStyle",	// 样式分组的类型
      "children": [	//子样式组
        {
          "title": "字体颜色", //样式配置项名称
          "key": "color", //样式配置项对应的控件所需要的属性名称
          "widget": 5, //样式配置项类型  在本代码中的最后有对应类型说明
          "default": 'rgba(0, 0, 0, 1)' //样式配置项默认值
        }
      ]
    }
  ],
  dataConfig: {},
};

// let staticPath = "../bi/static" //静态资源路径
class Keyframes extends XZChart { // XZChart 为控件基础类，基于这个类可以做数据的显示等控件事件的实现。
  constructor(selectors, config) {
    super(selectors, config);
  }

  definition() {
    this.definitions.type = 'frames';
    this.definitions.jsonConfig = _.cloneDeep(jsonConfig);
    this.definitions.columnCount = [0, 1];
    this.echarts_option= {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    };
    /**
     config.definitions 的说明
     type, //控件类型 String  例 "InputFilter"   default:''
     jsonConfig, //json配置  Object  default:{}
     width, //控件宽度 String  例  '200px'  default:'960px'
     height, //控件高度 String  例  '200px'  default:'540px'
     defaultOption, //控件默认配置项  Object  default:{}
     indexCount, //需要维度字段数 Array | number  例  0  -1  [0,-1]   default:0
     columnCount, //需要度量字段数 Array | number  例  0  -1  [0,-1]      default:0
     indexName, //维度实际显示名字 String  例  维度  字段   显示值值  指标  default:'维度'
     columnName, //度量实际显示名字 String  例  度量  字段   实际值   指标  default:'度量'
     designerScale, //控件显示类型  Number  例  1  2   1 -> 缩放填充 2 -> 保持控件的宽高  default:1
     useXSelector,   //是否需要X选择器  Boolean  例  true  false  default:true
     showDataSheet,  //是否显示数据集  Boolean    default:true
     showDataConfig  //是否显示控件选择器 数据过滤器 标签提示字段  default:true
     noDataRender  // 没有数据时是否渲染
     isFilterChart  // 是否是过滤器控件
     multiIndex   // 多个维度
     */
  }

  init() {
    console.log('@@@init')
    let controlEl = this.controlEl.el;
    this.el = document.createElement('div');

    this.el.innerHTML = `这是一个自定义控件`;
    controlEl.appendChild(this.el);

  }

  _transData() {
    console.log('@@@_transData')

    this.render();
  }

  _transOption(chartConfig) {
    console.log('@@@_transOption')
    console.log(chartConfig, 'chartConfig')
    this.chartOptions = chartConfig;
    this.render();
  }

  resize() {
  }

  render() {
    console.log('@@@@render:',this.chartOptions);
    if (this.el) {
      this.el.style.color = this.chartOptions?.chartStyle?.color;
      const {dataHandler} = this; //整理数据的数据集
      const formatData = dataHandler.getFormatData(); //获取格式化后的数据
      const {columns, data} = formatData; //columns 字段组 、data 格式化后数据
      this.el && data[0] && (this.el.innerHTML = `这是一个自定义控件 ${columns[0]}=${data[0][0]}`)
      this.myChart = echarts.init(this.el);
      this.myChart.setOption(echarts_option);
    }
  }
}

window.Keyframes = Keyframes;

import {onMounted} from 'vue';


let option = { //参数配置说明 根据您的需求填写option
  uploadImage: { //上传图片相关信息 如果不传该字段时，设计器用到的所有上传图片配置项均不显示。
    server: "url",//上传图片地址
    method: "post",//上传图片请求方式
    headers: { //上传图片请求头
      "Authorization": "Token XXXXXXXX"
    },
    fieldName: "file",
    resultField: "file"
  },
  pageData: { //画布初始化时的宽高
    width: '1920px',
    height: '1080px'
  },
  customModules: [
    {
      "text": "测试",
      "type": "frames",
      "icon": "boboant.png",
      "module":Keyframes
    }
  ],
  dataSet: [ //数据集按钮的方式
    { //Json数据
      id: 1,
      value: "新建Json数据集"
    },
    { //http请求数据
      id: 2,
      value: "新建Http接口数据集"
    },
    { //API服务数据
      id: 3,
      value: "API服务数据集"
    },
    {
      id: 4,
      value: "外部数据集"  //  新建一个新的报表实例，如果希望可以预先动态从后台提供几个数据集供其使用，这个配置必须有；
      // 然后只要动态的从后台拿到n个数据集，全部用 results格式装配，onUpdateDatasetList方法来触发
    }
  ]
}
let designer;
onMounted(() => {
  designer = new XZChartDesigner("#customKeyFrames", option);

})
</script>

<style scoped>

</style>
